import * as THREE from 'three';
const model = new THREE.Group();
const loader = new THREE.FileLoader();
var buildGroup = new THREE.Group(); 
loader.setResponseType('json')
loader.load(
	'/上海外滩.json',(data)=>{
    data.features.forEach(build => {
      if(build.geometry){
        // 把"Polygon"和"MultiPolygon"的geometry.coordinates数据结构处理为一致
        if(build.geometry.type === 'Polygon'){
          build.geometry.coordinates = [build.geometry.coordinates]
        }
        buildGroup.add(ShapeMesh(build.geometry.coordinates));
      }
    });
    model.add(buildGroup)
  })
const ShapeMesh = function(pointsArr){
  var shapeArr = []
  pointsArr.forEach(pointsArr=>{
    var vector2Arr = []
    pointsArr[0].forEach(elem=>{
      vector2Arr.push(new THREE.Vector2(elem[0],elem[1]))
    })
    shapeArr.push(new THREE.Shape(vector2Arr))
  })
  const geometry = new THREE.ShapeGeometry( shapeArr );
  const material =  new THREE.MeshLambertMaterial({
    color:0x0099ff
  })
  const mesh = new THREE.Mesh( geometry, material);
  return mesh
}

export {model};